<script setup lang="ts" name="MenuButtonAddEdit">
import { transformI18n } from '@/plugins/i18n'
const props = defineProps({
  menuButtonTypeList: { type: Array as any },
  requestTypeList: { type: Array as any }
})
const menuButtonList = toRef(props, 'menuButtonTypeList')
const requestList = toRef(props, 'requestTypeList')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData:any = ref({
  label: '',
  value: '',
  requestType: '',
  address: ''
})
// 显示新建/编辑模块表单抽屉弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    dialogTitle.value = 'buttons.buttonEdit'
    formData.value.label = v.label
    formData.value.value = v.value
    formData.value.requestType = v.requestType
    formData.value.address = v.address
  } else {
    dialogTitle.value = 'buttons.buttonCreate'
    formData.value.label = ''
    formData.value.value = ''
    formData.value.requestType = ''
    formData.value.address = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}
</script>

<template>
  <el-dialog v-model="dialogVisible" width="600px" append-to-body :title="transformI18n(dialogTitle, true) + transformI18n('buttons.菜单按钮', true)">
    <el-form label-width="auto" label-position="right">
      <el-form-item :label="$t('page.权限名称')">
        <el-select v-model="formData.label" :placeholder="$t('placeholders.请选择')" allow-create filterable clearable>
          <el-option v-for="item in menuButtonList" :key="item.value" :label="$t('menus.' + item.label)" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('page.权限值')">
        <el-input v-model="formData.value" :placeholder="$t('placeholders.请输入') + $t('page.权限值')" />
      </el-form-item>
      <el-form-item :label="$t('page.请求方式')">
        <el-select v-model="formData.requestType" :placeholder="$t('placeholders.请选择')" clearable>
          <el-option v-for="item in requestList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('page.接口地址')">
        <el-input v-model="formData.address" :placeholder="$t('placeholders.请输入') + $t('page.接口地址')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="modal-footer" ref="modalFooter">
        <el-button @click="handleCloseDialog">{{ $t('buttons.buttonCancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ $t('buttons.buttonConfirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form{
  :deep(.el-form-item__content){
    .el-radio-group{
      margin: 6px;

      &.radio-button{
        margin: 0;
      }
    }

    .icon-select{
      flex: 1;
      margin: 6px;
    }
  }

  :deep(.el-form-item__label){
    margin: 6px;
  }

  .el-form-group{
    display: flex;
    flex: 1;

    .el-form-item{
      flex: 1;
      margin: 0;
    }

    .el-form-item+.el-form-item{
      margin: 0;
    }
  }
}

.modal-footer{
  display: inline-flex;
  overflow: hidden;
}
</style>
